
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>苏苏少年</title>
        <style>
            html,
            body,
            div,
            span,
            applet,
            object,
            iframe,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            p,
            blockquote,
            pre,
            a,
            abbr,
            acronym,
            address,
            big,
            cite,
            code,
            del,
            dfn,
            em,
            img,
            ins,
            kbd,
            q,
            s,
            samp,
            small,
            strike,
            strong,
            sub,
            sup,
            tt,
            var,
            b,
            u,
            i,
            center,
            dl,
            dt,
            dd,
            ol,
            ul,
            li,
            fieldset,
            form,
            label,
            legend,
            table,
            caption,
            tbody,
            tfoot,
            thead,
            tr,
            th,
            td,
            article,
            aside,
            canvas,
            details,
            embed,
            figure,
            figcaption,
            footer,
            header,
            hgroup,
            menu,
            nav,
            output,
            ruby,
            section,
            summary,
            time,
            mark,
            audio,
            video {
                border: 0;
                font-size: 100%;
                font: inherit;
                vertical-align: baseline;
                margin: 0;
                padding: 0
            }
            article,
            aside,
            details,
            figcaption,
            figure,
            footer,
            header,
            hgroup,
            menu,
            nav,
            section {
                display: block
            }
            body {
                line-height: 1;
                user-select: none;
            }
            ol,
            ul {
                list-style: none
            }
            blockquote,
            q {
                quotes: none
            }
            blockquote:before,
            blockquote:after,
            q:before,
            q:after {
                content: none
            }
            table {
                border-collapse: collapse;
                border-spacing: 0
            }
            body {
                background: #b5afa7 no-repeat 23px 30px;
                background-size: 380px;
                font-family: 'Averia Sans Libre', helvetica, Sans, sans-serif;
            }
            .watermark {
                position: absolute;
                width: 100%;
                z-index: -1;
            }
            #main {
                margin: 0 auto 0;
                width: 800px;
            }
            .toolbar {
                border: 10px solid #a49e96;
                border-radius: 10px;
                font-size: 18px;
                margin: 20px;
                background: #938d85;
                display: inline-block;
            }
            button {
                border: none;
                background: transparent;
                color: #000;
                font-weight: bold;
                outline: none;
                font-size: 16px;
                font-family: 'Averia Sans Libre', helvetica, Sans, sans-serif;
            }
            button.disabled {
                color: #666;
                font-weight: normal;
            }
            button:hover {
                cursor: pointer;
                text-decoration: underline;
            }
            button.disabled:hover {
                cursor: default;
                text-decoration: none;
            }
            .time {
                background: #736d65;
                display: inline-block;
                padding: 6px 10px;
            }
            .board {
                border: 10px solid #a49e96;
                border-radius: 10px;
                margin: 20px;
                background: #938d85;
                display: inline-block;
            }
            .tile {
                position: relative;
                border: 1px solid #504d49;
                width: 30px;
                height: 30px;
                float: left;
                color: #100d09;
                font-weight: bold;
                line-height: 30px;
                font-size: 20px;
                vertical-align: middle;
                text-align: center;
            }
            .threat2 {
                color: #500d09;
            }
            .threat3 {
                color: #700d09;
            }
            .threat4 {
                color: #900d09;
            }
            .threat5 {
                color: #b00d09;
            }
            .threat6 {
                color: #e00d09;
            }
            .threat7 {
                color: #f00d09;
            }
            .threat8 {
                color: #ff0000;
            }
            .lid {
                position: absolute;
                top: -1px;
                left: -1px;
                right: -1px;
                bottom: -1px;
                border: 2px outset #a49e96;
                background-image: radial-gradient( circle at top left, #a49e96, #605d59);
            }
            .lid:hover {
                background-image: radial-gradient( circle at bottom right, #a49e96, #605d59);
            }
            .mine {
                background: url(img/1.png);
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div id="board"></div>
        </div>

        <script src='https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.1/immutable.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js'></script>
        <script src="js/demo.js"></script>
    </body>
</html>